<template>
	<view>
		<BgLinear />
		<BackBar :title="formatDate(daysAgo)" />
		<view class="box-theme-column">
			<view class="box-gird">
				<view class="grid-item" @click="fullScreenPreviewImage(index)" v-for="(item, index) in arr_image.value" :key="item.id">
					<ImageLoading :src="item.url"></ImageLoading>
				</view>
			</view>
		</view>

		<Barload :status="barload_status" />

		<FixedFun />
	</view>
</template>

<!-- 需路由传递category -->
<script setup>
import { reactive, ref, computed } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { get_day_choice } from '../../../api'
import { onPageScroll } from '@dcloudio/uni-app'

// 给FixedFun
onPageScroll(() => {})

const arr_image = reactive({ value: [] })
const barload_status = ref('loading')

const daysAgo = ref(null)
const title = ref('')
const total = ref(null)

onLoad((obj) => {
	daysAgo.value = obj.daysAgo
	api_get_image_data_by_category()
})

const api_get_image_data_by_category = async function (is_push = false) {
	let res = await get_day_choice(daysAgo.value)
	arr_image.value = res.data
	barload_status.value = 'no-more'
	total.value = res.data.length
}

const formatDate = function (daysAgo) {
	const timestamp = Date.now() - (daysAgo - 1) * 86400000

	const date = new Date(timestamp)
	const year = date.getFullYear()
	const month = String(date.getMonth() + 1).padStart(2, '0')
	const day = String(date.getDate()).padStart(2, '0')
	return `${year}年${month}月${day}`
}

const fullScreenPreviewImage = function (index) {
	let arg = '?index=' + index
	arg += '&daysAgo=' + daysAgo.value
	arg += '&total=' + total.value

	uni.navigateTo({
		url: '/pages/dayPreviewImage/dayPreviewImage' + arg
	})
}
</script>

<style scoped lang="scss">
.box-theme-column {
	margin: 0 $my-margin-rpx;
	position: relative;
	z-index: 1;

	.box-gird {
		display: grid;
		grid-template-columns: repeat(3, 228rpx);
		place-content: space-around space-evenly;
		grid-gap: 10rpx;
		.grid-item {
			height: 500rpx;
		}
		.grid-item-samll {
			height: 228rpx;
		}
	}
}
</style>
